<template>
  <div class="body">
    <div class="header">
      <div class="quick-menus">
        <div class="qm-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
               class="feather feather-arrow-left">
            <line x1="19" y1="12" x2="5" y2="12"></line>
            <polyline points="12 19 5 12 12 5"></polyline>
          </svg>
        </div>
        <div class="qm-item">Home</div>

      </div>
      <div class="quick-home">
        <img class="logo" src="/images/icon-binance.png"/>
      </div>
      <div class="user-avatar"></div>
    </div>

    <div class="content">
      <div class="left-menus">

        <div class="menu-group">
          <div class="group-name">Main</div>
          <div class="menu-item cur-menu">
            <div class="menu-info">
              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                   class="feather feather-home">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                <polyline points="9 22 9 12 15 12 15 22"></polyline>
              </svg>
              <span>主页</span>
            </div>
          </div>
        </div>

        <div class="menu-group">
          <div class="group-name">Apps</div>
          <div class="menu-item">
            <div class="menu-info">
              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                   class="feather feather-user">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              <span>用户管理</span>
            </div>
          </div>
        </div>
      </div>

      <div class="right-content">
        <RouterView />
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {ref, reactive, watch} from "vue";
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
</script>

<style scoped lang="scss">
.body{
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #f3f4f7;
  color: #5b5b5b;
  font-size: 14px;
  .header{
    width: 100%;
    height: 70px;
    padding: 10px 20px;
    background: #FFFFFF;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .quick-menus{
      display: flex;
      .qm-item{
        cursor: pointer;
        >svg:hover{
          color: #FCD535;
        }
      }
      .qm-item+.qm-item{
        margin-left: 10px;
      }
    }
    .quick-home{
      .logo{
        width: 40px;
        height: 40px;
      }
    }
  }

  .content{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left-menus{
      width: 260px;
      min-height: 500px;
      padding: 20px 15px;
      border-radius: 15px;
      background: #FFFFFF;
      .menu-group{
        margin-bottom: 10px;
        .group-name{
          margin-bottom: 20px;
          color: #6c757d;
          font-size: 12px;
          padding: 0 15px;
        }
        .menu-item{
          width: 100%;
          height: 45px;
          transition: all .1s ease-in-out;
          cursor: pointer;
          border-radius: 10px;
          padding: 0 15px;
          .menu-info{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            >span{
              margin-left: 10px;
            }
          }
        }
        .cur-menu{
          color: #FCD535;
          background: #f3f6f9;
        }
        .menu-info:hover{
          transform: translateX(3px);
        }
      }
    }
    .right-content{
      flex: 1;
      background: #FFFFFF;
      border-radius: 15px;
    }
    .left-menus+.right-content{
      margin-left: 20px;
    }
  }
}
</style>
